import React from "react";
import styles from "./Home.module.css";
import HeaderCom from "./components/header/HeaderCom";
import SwiperCom from "./components/swiper/SwiperCom";
import MarketingCalendar from "./components/marketingCalendar/MarketingCalendar";
import CommonTools, { compactTools } from "./components/commonTools/CommonTools";
import VideoTemplateGallery from "../../components/video/VideoTemplateGallery";
import DesignMaterial from "../../components/koople/DesignMaterial";
import PosterSection from "../../components/happle/PosterSection";
import MusicCategories from "../../components/mucces/MusicCategories";
import PortraitCategories from "../../components/props/PortraitCategories";
import Posters from "../../components/common/RecentHotspots";
import OnlineRetailers from "../../components/data/Posters";
import SolutionsPage from "../../components/commones/SolutionsPage";
import RightToolbar from '../../components/messap/RightToolbar'
const Home: React.FC = () => {
  const navItems = [
    "精选推荐",
    "图文视频",
    "企业视频",
    "视频元素",
    "背景视频",
    "创意视频",
  ];

  const featuredTemplate = {
    id: "1",
    title: "美好恰逢真时",
    thumbnail: "../public/app.mp4",
    count: 40,
  };

  const rightTopTemplate = {
    id: "2",
    title: "光影人物介绍图文",
    thumbnail: "../public/app1.mp4",
    count: 24,
  };

  const rightBottomTemplate = {
    id: "3",
    title: "文字汇聚片头",
    thumbnail: "../public/app2.mp4",
    count: 28,
  };
  return (
    <div className="container">
      <HeaderCom />
      <SwiperCom />
      <div className={styles.content}>
        <CommonTools tools={compactTools} />
        <MarketingCalendar />
        <Posters />
        <VideoTemplateGallery
          navItems={navItems}
          featuredTemplate={featuredTemplate}
          rightTopTemplate={rightTopTemplate}
          rightBottomTemplate={rightBottomTemplate}
        />
        <DesignMaterial />
        <PosterSection />
        <MusicCategories />
        <PortraitCategories />
        <OnlineRetailers />
        <SolutionsPage />
        <RightToolbar />
      </div>
    </div>
  );
};

export default Home;